<template>
	<view class="team">
		<view class="headtop">
			<view class="headtitile">
				<image src="../../../static/images/left.png" @click="fanhui"></image>
				<text @click="fanhui">AI团队</text>
			</view>
		</view>
		<view class="body">
			<view class="list" v-for="(item,index) in list" :key="index" @click="detail(item.id)">
				<view class="top clearfix">
					<view class="left fl">{{item.mobile}}</view>
					<view class="right fr" @click.stop="del(index)"
						v-if="delstatus == 1 && userData.team.mobile != item.mobile">删除</view>
				</view>
				<view class="center">
					<view class="li clearfix">
						<view class="name fl">用户名：</view>
						<view class="desc fl">{{item.username}}</view>
					</view>
					<view class="li clearfix">
						<view class="name fl">创建时间：</view>
						<view class="desc fl">{{item.create_time}}</view>
					</view>
					<view class="li clearfix">
						<view class="name fl">过期时间：</view>
						<view class="desc fl">{{item.expire_time}}</view>
					</view>
					<view class="li clearfix">
						<view class="name fl">最后登录时间：</view>
						<view class="desc fl">{{item.last_login_time}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/api/request';

	export default {
		data() {
			return {
				delstatus: 0,
				userData: [],
				list: [],
			}
		},
		onLoad() {
			// 用户基本信息
			request({
				url: '/api/user/profile',
				method: 'GET',
				data: {},
				header: {
					'xx-token': uni.getStorageSync('token')
				}
			}).then((response) => {
				this.userData = response.data;

				// 主账号删除权限
				if (response.data.mobile == response.data.team.mobile) {
					this.delstatus = 1;
				}

				this.getList();
			}).catch((error) => {});

		},
		methods: {
			getList() {
				request({
					url: '/api/user/team',
					method: 'GET',
					data: {},
					header: {
						'xx-token': uni.getStorageSync('token')
					}
				}).then((response) => {
					this.list = response.data.list;
				}).catch((error) => {});
			},
			del(index) {
				let that = this;
				let id = this.list[index].id;

				uni.showModal({
					title: '提示', // 对话框标题
					content: '您确认删除么？', // 显示的内容
					showCancel: true, // 是否显示取消按钮
					success: function(res) {
						if (res.confirm) {
							request({
								url: '/api/user/userteamdel',
								method: 'POST',
								data: {
									id: id,
								},
								header: {
									'xx-token': uni.getStorageSync('token')
								}
							}).then((response) => {
								uni.showToast({
									title: response.msg,
									icon: 'none'
								})

								that.getList();
							}).catch((error) => {});
						} else if (res.cancel) {

						}
					}
				});
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/user/second/team_detail?id=' + id
				})
			},
			fanhui() {
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.team {
		width: 100%;
		margin: 0 auto;

		.headtop {
			width: 100%;
			margin: 0 auto;
			position: relative;
			height: 166rpx;
			z-index: 200;

			.headtitile {
				width: 94%;
				margin: 0 auto;
				position: absolute;
				top: 60rpx;
				left: 3%;
				height: 96rpx;
				line-height: 96rpx;

				image {
					width: 20rpx;
					height: 36rpx;
					float: left;
					margin-right: 18rpx;
					margin-top: 28rpx;
				}

				text {
					font-size: 32rpx;
					color: #FFFFFF;
					float: left;
					height: 96rpx;
					line-height: 96rpx;
				}
			}
		}

		.body {
			width: 94%;
			margin: 0 auto 20rpx;

			.list {
				width: 100%;
				margin: 0 auto 20rpx;
				background: #242831;
				box-sizing: border-box;
				border-radius: 20rpx;
				position: relative;
				padding-bottom: 24rpx;

				.top {
					width: 94%;
					margin: 0 auto;
					padding-top: 24rpx;
					padding-bottom: 26rpx;
					border-bottom: 1rpx solid #31353E;
					box-sizing: border-box;

					.left {
						font-size: 30rpx;
						color: #ECDEA4;
						width: 58%;
						white-space: nowrap;
						/* 设置文本不换行 */
						overflow: hidden;
						/* 隐藏溢出的内容 */
						text-overflow: ellipsis;
						/* 将溢出的文本显示为省略号 */
					}

					.right {
						width: 40%;
						font-size: 30rpx;
						color: #EB1313;
						text-align: right;
					}
				}

				.center {
					width: 94%;
					margin: 0 auto;
					margin-top: 20rpx;

					.li {
						width: 100%;
						line-height: 52rpx;

						.name {
							width: 170rpx;
							color: #FFFFFF;
							font-size: 24rpx;
						}

						.desc {
							color: #ABB0CC;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>